<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 描述一只猫的 名字 颜色 物种 叫声 技能


    // 面向过程:   就是分析出解决问题所需要的步骤，然后用变量,函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

    /* var name = "Tom";
    var color = "black";
    var species = "Cat";

    function hall() {
        console.log("喵喵");
    }

    function skill() {
        console.log("捉老鼠", "卖萌");
    } */


    // 面向对象编程  =>  思想上提升, 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)

    // 最简单的面向对象(字面量对象): 将面向过程中的变量和方法整合到对象中,作为对象的属性和方法
    var Tom = {
        name: "Tom",
        color: "black",
        species: "Cat",
        hall() {
            console.log("喵喵", "老吴");
        },
        skill() {
            console.log("捉老鼠", "卖萌");
        }
    }

    /* var Kitty = {
        name: "Kitty",
        color: "pink",
        species: "Cat",
        hall() {
            console.log("喵喵", "老吴");
        },
        skill() {
            console.log("捉老鼠", "卖萌");
        }
    }

    var HongMao = {
        name: "虹猫",
        color: "orange",
        species: "Cat",
        hall() {
            console.log("喵喵", "老吴");
        },
        skill() {
            console.log("捉老鼠", "卖萌");
        }
    } */


    // 函数封装(简易工厂模式)  => 可以根据传入的参数,快速得到想要的对象
    // 缺点:
    // (1) 通过函数cat创建的对象,和函数本身并无任何关系 (Cat不是构造函数)
    // var arr = new Array(1, 2, 3);
    // console.log(arr instanceof Array);

    // var obj = new Object({ a: 1, b: 2 });
    // console.log(obj instanceof Object);

    // (2) 公共的属性和方法重复创建 =>占内存

    function cat(name, color) {
        var obj = { // new Object()
            name: name,
            color: color,
            species: "Cat",
            hall() {
                console.log("喵喵", "老吴");
            },
            skill() {
                console.log("捉老鼠", "卖萌");
            }
        }
        return obj;
    }


    var Tom = cat("Tom", "black");
    console.log(Tom);

    var Kitty = cat("Kitty", "pink");
    console.log(Kitty);

    var HongMao = cat("HongMao", "orange");
    console.log(HongMao);


    console.log(Tom instanceof cat, Tom instanceof Object);
    console.log(Kitty instanceof cat, Kitty instanceof Object);
    console.log(HongMao instanceof cat, HongMao instanceof Object);





</script>

</html>